<template>
    <rx-layout class="m-layout-box">
        <template #middle>
            <rx-fit v-model="fitSearch">
                <template #head>
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="table-operator">
                      <a-button type="primary" @click="add">
                        <template #icon>
                          <plus-outlined/>
                        </template>
                        {{$ti18('rxList.newBtn','新建')}}
                      </a-button>
                    </div>
                    <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                  </div>
                </template>
                <template #search>
                  <a-form layout="vertical">
                    <a-form-item :label="i18n('form.tranAccount','移交人账号')">
                      <a-input :placeholder="i18n('form.tranAccount','移交人账号','input')" v-model:value="urlConfig.queryParam.Q_DELIVER_USER_NO__S_LK"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.transferee','移交人')">
                      <a-input :placeholder="i18n('form.transferee','移交人','input')" v-model:value="urlConfig.queryParam.Q_DELIVER_USER_NAME__S_LK"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.receAccout','接管人账号')">
                      <a-input :placeholder="i18n('form.receAccout','接管人账号','input')" v-model:value="urlConfig.queryParam.Q_RECEIPT_USER_NO__S_LK"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.receiver','接管人')">
                      <a-input :placeholder="i18n('form.receiver','接管人','input')" v-model:value="urlConfig.queryParam.Q_RECEIPT_USER_NAME__S_LK"/>
                    </a-form-item>
                  </a-form>
                  <div class="list-search-toolbar">
                    <a-button type="primary" @click="search">
                      <SearchOutlined/>
                      {{ $ti18('rxList.searchBtn', '查询') }}
                    </a-button>
                    <a-button style="margin-left: 4px" @click="resetSearch">
                      <RedoOutlined />
                      {{ $ti18('rxList.resetBtn', '重置') }}
                    </a-button>
                  </div>
                </template>
                <template #middle>
                  <rx-grid ref="table"
                           :hasPage="true"
                           :urlConfig="urlConfig"
                           :selectConfig="selectConfig"
                           url="/api-bpm/bpm/core/bpmDeliver/query"
                           field="id"
                           :columns="columns"
                           :rowClassName="customRowBg"
                  >
                    <template #deliverUserName="{row}">
                      {{ row.deliverUserName }}({{ row.deliverUserNo }})
                    </template>
                    <template #receiptUserName="{row}">
                      {{ row.receiptUserName }}({{ row.receiptUserNo }})
                    </template>
                    <template #action="{ row }">
                      <RxGridAction :size="2">
                        <div v-if="removeEnable" @click.stop="delByIds([row.id])">{{$ti18('rxList.delBtn','删除')}}</div>
                      </RxGridAction>
                    </template>
                  </rx-grid>
                </template>
            </rx-fit>
        </template>
    </rx-layout>
</template>

<script>
import {RxLayout,RxFit,BaseList} from '@lowcode/jpaas-base-lib';
import BpmDeliverApi from '@/common/api/bpm/bpmDeliver'
import BpmDeliverEdit from './BpmDeliverEdit.vue'

export default {
    name: 'BpmDeliverList',
    mixins: [BaseList],
    components: {
        RxLayout,
        RxFit
    },
    data() {
        return {
            urlConfig: {
              ajaxType: 'post',
              contentType: 'json',
              queryParam: {},
              dataField: 'result.data',
              totalField: 'result.totalCount'
            },
            selectConfig: {
              type: 'checkbox',
              checkMethod:this.getCheckboxProps
            },
            columns: [
                {
                    title: this.i18n('form.transferee','移交人'),
                    field: 'deliverUserName',
                    minWidth: 150,
                    slots: {default: 'deliverUserName'}
                },
                {
                    title: this.i18n('form.receiver','接管人'),
                    field: 'receiptUserName',
                    minWidth: 150,
                    slots: {default: 'receiptUserName'}
                },
                {title: this.$ti18('rxForm.notes','备注'), field: 'comment', minWidth: 200},
                {title: this.i18n('form.addTime','添加移交时间'), field: 'createTime', minWidth: 150},
                {title: this.$ti18('rxList.action','操作'), minWidth: 40, field: 'action', slots: {default: 'action'}}
            ],
            component: BpmDeliverEdit,
            comment: this.i18n('list.workHand','工作交接'),
            widthHeight: ['600px', '400px'],
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmDeliver",key);
        },
        delById(ids) {
            return BpmDeliverApi.del({ids: ids.join(',')});
        },
        customRowBg({row}) {//表格行类名
            if (row.isHistory == '1') {
                return 'rowHidden'
            }
        },
        getCheckboxProps({row}) {//表格选择框不能选中
            if (row.isHistory == '1') {
                return false;
            }
            return true;
        }
    }
}
</script>
<style scoped>
.m-layout-box{
    padding: 10px;
}
.rxGrids >>> .rowHidden,
.rxGrids >>> .rowHidden td {
    background-color: rgba(0, 0, 0, 0.05) !important;
}
</style>

